<template>
  <div id="myChart"></div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  #myChart{
    width: 100%;
    height: 500px;
    margin: auto;
    text-align: center;
  }
</style>
<script type="text/ecmascript-6">
  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/radar')
  require('echarts/lib/component/tooltip')
    export default {
        name: '',
        props:['val'] ,
        data() {
            return {};
        },
        methods: {
          draw(){
            let myChart = echarts.init(document.getElementById('myChart'))
            myChart.setOption({
              tooltip: {
                trigger: 'axis'
              },
              radar: [
                {
                  indicator: [
                    {text: '服务能力',max:1},
                    {text: '管理能力',max:1},
                    {text: '营销能力',max:1},
                    {text: '发展能力',max:1},
                    {text: '维护能力',max:1},
                    {text: '财务能力',max:1}
                  ],
                  center: ['50%','50%'],
                  radius: '80%',
                  startAngle: 90,
                  name: {
                    formatter: '{value}',
                    textStyle: {
                      color: '#957960',
                      fontSize:20,
                    },
                  },
                  splitArea: {
                    areaStyle: {
                      color: '#fff'
                    }
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#957960'
                    }
                  },
                  splitLine: {
                    lineStyle: {
                      color: '#957960'
                    }
                  }
                }
              ],
              series: [
                {
                  type: 'radar',
                  tooltip: {
                    trigger: 'item'
                  },
                  itemStyle: {
                    normal: {
                      color:'#f9931f',
                      areaStyle: { color:'#ffc013'}
                    }
                  },
                  data: [
                    {
                      symbol: 'roundRect',
                      symbolSize:8,
                      lineStyle: {
                        normal: {
                          color: '#f8921e',
                          width:2
                        }
                      },
                      // value: this.val,
                      value: this.val,
                      name: '能力值'
                    }
                  ]
                }
              ]
            });
          }
        },
      mounted(){
        this.draw();
      },
      created() {
      },
      watch: {
          val() {
            this.$nextTick(() => {
              this.draw();
            })
          }
      },

      components: {}
    }
</script>
